<template>
  <div class="weather-report">
    <div class="left">
      <config :pageDetail="pageDetail"></config>
    </div>
    <div class="right">
      <iframe :src="currentUrl" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
import config from "./config";
export default {
  components: { config },
  data() {
    return {
      pageDetail: {
        mode: 21,
        city: ["guangdong", "shenzhen"],
        textColor: "#fff", // 字体颜色
        bgColor: "#FF8C00",
        fontSize: 12, // 字体大小
        remFontSize: 0.7, // 自适应字体大小
        customUrl: ""
      },
      currentUrl: ""
    };
  },
  created() {
    this.setData();
  },
  watch: {
    pageDetail: {
      handler() {
        if (this.pageDetail.customUrl) return this.pageDetail.customUrl;
        this.setData();
      },
      deep: true
    }
  },
  methods: {
    setData() {
      const city =
        this.pageDetail.city instanceof Array
          ? this.pageDetail.city[1]
          : this.pageDetail.city;
      const currentFontSize = this.pageDetail.fontSize;
      const bgColor = this.pageDetail.bgColor
        ? this.pageDetail.bgColor
        : document.querySelector(".dashboard-config-block").style
            .backgroundColor;
      this.currentUrl = (
        "https://i.tianqi.com?c=code&num=1&icon=2&id=" +
        this.pageDetail.mode +
        "&py=" +
        city +
        "&site=" +
        (currentFontSize < 12 ? 12 : currentFontSize) +
        "&color=" +
        this.pageDetail.textColor +
        "&bgc=" +
        bgColor
      ).replace(/\#/g, "%23");
    }
  }
};
</script>

<style scoped lang="scss">
.weather-report {
  width: 100%;
  height: 100vh;
  padding: 20px;
  display: flex;
  .left {
    width: 400px;
    height: 100%;
    border-right: 1px solid black;
  }
  .right {
    flex: 1;
    text-align: center;
    margin-top: 300px;
  }
}
</style>
